<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="/spring-merchant/js/bootstrap/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/spring-merchant/css/bootstrap/bootstrap.min.css" >
    <link rel="stylesheet" href="/spring-merchant/css/bootstrap/bootstrap-theme.min.css">
    <script src="/spring-merchant/js/bootstrap/bootstrap.min.js"></script>
	
	<script src="/spring-merchant/js/dist/sweetalert-dev.js"></script>
    <link href="/spring-merchant/css/dist/sweetalert.css" rel="stylesheet">
    <script src="/spring-merchant/js/dist/sweetalert.min.js"></script>
    <script type="text/javascript" src="/spring-merchant/js/websocket.js"></script>
    <style>
        <style>
        .top-title{
            height: 100px;
            width: 100%;
        }
        .log-div{
            width: 15.7%;
            float: left;
        }
        .title-nav{
            position:relative;
            float: left;
            height: 100px;
            width: 84.3%;
           /* background-color: coral;*/
        }
        .page-header-div{
            float: left;
            text-align: center;
            width: 80%;
            margin: 15px 0px 15px 0px;
            padding: 0px;
            border: 0px;
            /*background-color: darkgray;*/
        }
        .admin-center{
            float: left;
            text-align: center;
            width: 20%;
            margin: 15px 0px 15px 0px;
            padding: 0px;
            border: 0px;
            /*background-color: aqua;*/
        }
        .user-center-btn-group{
            margin-left: 10%;
        }
        .user-center-btn-group button:nth-child(2) span:nth-child(1) {
         margin-top:100%;
            text-align: center;
         vertical-align: middle;
            padding: 4.5px 0px;
            line-height: 40px;
        }
        .menu-div{
            float: left;
            width: 15.7%;
        }
        .menu-li{
            padding: 20px 0px;
        }
        .operationarea{
            float: left;
            width: 84.3%;
            height: 873px;
            border: 1px solid gray;
        }
        #show-order-area{
         	overflow-y:scroll;
        	overflow-x:hidden;
         	margin-top: 1%;
            width: 100%;
            height: 1000px;
        }
        .order-sample-div{
            width: 98%;
        }
        #order-details-list{
            height: 130px;
        }
        .order-detail-per{
            float: left;
            width: 15%;
        }
        .order-detail-time{
            margin-left: 3%;
            width: 120px;
        }
        .order-reply{
            float: right;
            vertical-align: middle;
        }
        .order-reply button:first-child{
            margin-top: 30px;
            padding: 5px 25px;
        }
        #check-btn-div{
            float: none;
            width: auto;
        }
        .hidden-attr{
            display: none;
        }
    </style>
    </style>
</head>
<body>
<!-- 模态框组建，每一个评论后跟随的回复按钮引用
在模态框中动态加载订单用户的名字和用户的评价
在回复中校验字符个数，若不符合，显示错误提示 -->
<div class="modal " id="commentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Response Evaluation</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label id="customer-name" class="control-label">Reply To:Customer Name</label>
            <br/>
          </div>
          <div class="form-group">
            <label class="control-label">Comment Time:</label>
            <p id="customer-comment-time"></p>
          </div>
          <div class="form-group">
            <label class="control-label">Customer Comment:</label>
             <p id="customer-comment">Customer Comment Context</p>
          </div>
          <div class="form-group">
            <label class="control-label">Reply Comment:</label>
            <textarea class="form-control" id="merchant-reply-text"></textarea>
          </div>
          <div class="alert alert-danger hidden-attr alert-unqualified" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                    Your reply does not conform to the format requirements, 
                    in English or Chinese within 50 words
          </div>
          <div class="alert alert-danger hidden-attr alert-failed" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                    Reply to customer comment failed, try again please!
                    if you want to give up this action ,please chick close button!
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="reply-btn">Reply</button>
      </div>
    </div>
  </div>
</div>
    <!--订单克隆模板-->
<div class="order-sample order-sample-div col-xs-1 col-md-10 hidden-attr">
    <div id="order-details-list" class="thumbnail" >
        <div class="caption order-detail-per order-detail-time">
            <h3 id="date">Date</h3> 
            <p id="time">Time</p> 
        </div>
        <div class="caption order-detail-per order-detail-customer">
            <h3 id="customerName">CustomerName</h3>
            <p>CustomerAddressr</p>                            
        </div>
        <div class="caption order-detail-per order-detail-order">
            <h3>MoneyTotal</h3>
            <p>total</p>
        </div>
        <div name="status" class="caption order-detail-per order-detail-statu" >
            <h3>Customer Comment</h3>
            <textarea class="form-control" disabled="disabled"></textarea>
        </div>
        <div class="caption order-detail-per order-detail-order">
            <h3>Merchant Reply</h3>
            <textarea class="form-control" disabled="disabled"></textarea>
        </div>
        <div class="btn-group caption order-detail-per order-reply">
            <button id="detailBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#commentModal">Reply</button>      
        </div>
    </div>
</div>
<div id="main-div">
    <!-- 上方标题-->
    <div class="top-title">
        <div class="dole-logo log-div">
            <a href="">
                 <img src="/spring-merchant/image/login.jpg" alt="merchant">
            </a>
        </div>
        <div class="title-nav">
            <div class="page-header page-header-div">
                <h1>Comment manager<small></small></h1>
            </div>
           	<%@include file="../../user_nav.jsp"%>
        </div>
    </div>
    <!-- 菜单栏-->
    <div class="bottom-menu-operationarea">
        <div id="left-menu-log" class="mac-main-nav menu-div">
             <div class="console-menu">
				<ul class="nav nav-pills nav-stacked">
				    <li crole="presentation" class="menu-li"><a
							href="/spring-merchant/views/orders">Order Management</a></li>
				    <li role="presentation" class="menu-li"><a
							href="/spring-merchant/views/foods">Food Management</a></li>
					<li role="presentation" class="active  menu-li"><a
							href="/spring-merchant/views/comments">Comment Management</a></li>
                    <li role="presentation" class="menu-li"><a
							href="/spring-merchant/views/advertisement">Advertisement Management</a></li>
				</ul>
                </div>
			</div>
        </div>
        <div class="operationarea">
            <div id="show-order-area">
            </div>
        </div>
    </div>

     <script type="text/javascript">
     (function(){
	       var obj={};
	       //用来设置ajax回调函数的上下文。让回调函数中的this指向这个对象。
	       obj.ajax = function(type, url, data, headers, context, callback){
          $.ajax({
               type: type,
			         url: url,
			         data: JSON.stringify(data),
			         headers: headers,
			         context:context
		          }).done(callback);
	           };
	       window.ajaxRequest = obj;
   })();
   
   function orderListShow(template){
       this.orderTemplate = template;
       this.orderModel = null;
       this.findOrderByStatus = function(){
           /*添加查询操作,根据spring提供的借口做出修改*/
           ajaxRequest.ajax("GET","/spring-merchant/orders/reply?order_status_id=SUCCESS",null,null,this,function(orders){
			        this.orderModel = orders;
			        _render_order(this.orderTemplate, this.orderModel);
		     });
       }
       
       /* 格式化时间  */
       function dateFormat(time){
           var commentTime = time;
           var timeList = commentTime.toString().split(" ").slice(1,5);
           return timeList[2]+"-"+timeList[1]+"-"+timeList[0]+" "+timeList[3];
       }
       
       function dateFormat(time){
           var birth = new Date(time);
           var month = birth.getMonth()+1;
           if (birth.getMonth()+1<10){
               var month = "0" + (birth.getMonth()+1);
           }
           var dat = birth.getDate();
           if (birth.getDate() < 10){
               var dat = "0" + birth.getDate();
           }
           var time = birth.getHours();
           return birth.getFullYear()+"-"+month+"-"+dat+" "+birth.getHours()+":"+birth.getMinutes()+":"+birth.getSeconds();
       }
       
       /*渲染orderList*/
       function _render_order(orderTemplate,data){
       	 var orderTemplateTemp = orderTemplate;
       	 orderTemplateTemp.empty();
           data.forEach(function(item){
          	 console.log("item"+item);
               var clone = $(".order-sample").clone().removeClass("hidden-attr").removeClass("order-sample");
               var childOdClone = clone.children("#order-details-list");
               /*date*/
               childOdClone.children("div:first").children("h3").text();
               /*time*/
               var  newDate = new Date();
               newDate.setTime(item.createDate*1000);
               childOdClone.children("div:first").children("p").text(dateFormat(item.createDate));
               /*customer name*/
               childOdClone.children("div:nth-child(2)").children("h3").text(item.customer.name);
               /*customer address*/
               childOdClone.children("div:nth-child(2)").children("p").text(item.deliveryAddress);
               /*Money Total*/
               var total = 0;
               item.orderItemList.forEach(function(item){
               	total = total + item.price*item.amount;
               });
               childOdClone.children("div:nth-child(3)").children("h3").text("Total");
               /*Proess Number*/
               childOdClone.children("div:nth-child(3)").children("p").text(total);
               var comment_flag = 0;
               var customer_comment = null;
               var merchant_reply = null;
               item.comment.forEach(function(comment){
              	 if(comment_flag == 0 && comment != null){
              		 customer_comment = comment;
              		 console.log( customer_comment);
              		 childOdClone.children("div:nth-child(4)").children("h3").text("Comment");
                     childOdClone.children("div:nth-child(4)").children("textarea").val(customer_comment.content).attr("id","status"+item.id);
              	 }
              	if(comment_flag == 1 && comment != null){
              		 merchant_reply = comment;
             		 console.log( merchant_reply);
             		childOdClone.children("div:nth-child(5)").children("h3").text("Reply");
                    childOdClone.children("div:nth-child(5)").children("textarea").val(merchant_reply.content);
             	 }
              	 comment_flag++;
               });
               /* reply button*/
               var replyBtn =  childOdClone.children("div:nth-child(6)").children("button:first");
               replyBtn.attr("id","detailBtn")
                   .attr("value", item.id);
               if(comment_flag != 1){
                   replyBtn.attr("disabled", "disabled");
               }
               replyBtn.on("click", function(){
                       $("#customer-name").attr("value", item.id).text("Reply To: " +item.customer.name);
                       $("#customer-comment-time").text(dateFormat(new Date(customer_comment.comentDate)));
                       /*添加customer-comment*/
                       $("#customer-comment").text(customer_comment.content ); 
                   });
               /* add to dom tree */
               console.log(clone);
               orderTemplateTemp.append(clone);
           });
       }
   };
   $(function(){
       var orderShow = new orderListShow($("#show-order-area"));
       orderShow.findOrderByStatus(); 
       var ret = /^[\u4E00-\u9FA5.a-zA-Z0-9,.]{1,50}$/;
       $("#reply-btn").on("click", function(){
           var o_id = $("#customer-name").attr("value");
           var comment_reply = $("#merchant-reply-text").val();
           console.log(o_id+"....."+comment_reply);
          /*  输入信息验证 */
           if(comment_reply.length<=50){
                   /*发送请求*/
          	 ajaxRequest.ajax("POST","/spring-merchant/replyComment?comment="+comment_reply+"&o_id="+o_id,null,null,this,function(feedback){
		    	 		if("success" == feedback)
		    	 			window.location.reload();
		    	 		else
		    	 			$(".alert-failed").removeClass("hidden-attr"); 
          	 });
           }
           else{
               	$(".alert-unqualified").removeClass("hidden-attr");   
           }
       });
   });</script>
</body>
</html>